<template>
    <div class="home">

        <!-- 1.使用顶部导航组件 -->
        <!-- <nav-comp :back="false" title="首页"></nav-comp> -->

        <!-- 8. 间隔槽-->
        <!-- <div class="row"></div> -->
        <!-- <gap-comp :height="1"></gap-comp> -->

        <!-- 2.搜索 分类导航区域 -->
        <div class="head">
            <div class="search">
                <img src="@/assets/img/icon/address2.png" />
                <img src="@/assets/img/logo/white.png" />
                <div class="search_input">
                    <van-field v-model="keywords" left-icon="search" placeholder="请输入搜索关键词" />
                </div>
                <img src="@/assets/img/icon/dp.png" class="dp" />
            </div>
            <div class="cate">
                <div class="catenavtab">
                    <van-tabs background="rgba(0,0,0,0)" color="#fff" title-inactive-color="#DDD" title-active-color="#FFF">
                        <van-tab v-for="item in cateData" :title="item.catename" :key="item.id"></van-tab>
                    </van-tabs>
                </div>
                <div class="category">
                    <img src="@/assets/img/icon/cate.png" />
                    <span>分类</span>
                </div>
            </div>
        </div>

        <!-- 3.轮播图区域 -->
        <div class="swiper_banner">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <!-- 注意：我们可以使用vantui组件的名字作为class样式选择器使用 -->
                <van-swipe-item v-for="item in bannerData" :key="item.id">
                    <img :src="$pre + item.img" />
                </van-swipe-item>
                <!-- <van-swipe-item>
                                                                                                                                                                                <img src="https://api.aslegou.top/uploads/banner/972ca570-7033-11ea-90dd-3b8abd26afb2.jpg" />
                                                                                                                                                                            </van-swipe-item> -->
            </van-swipe>
        </div>

        <!-- 4.商品推荐快速导航区域 -->
        <div class="quicknav">
            <div class="row" v-for="(item, index) in quicknav" :key='index' hover-class="touchOpacity">
                <img :src="item.src" class="u-skeleton-circle" />
                <span class="u-skeleton-rect">{{ item.text }}</span>
            </div>
        </div>

        <!-- 5.商品秒杀 -->
        <div class="seckill">
            <!-- 秒杀左侧区域 -->
            <div class="leftseckill">
                <div class="title " hover-class="touchOpacity">
                    <span>限时秒杀</span>
                    <span>查看更多 > </span>
                </div>
                <div class="left_seckill_info">
                    <van-count-down :time="time">
                        <template #default="timeData">
                            <span class="block">{{ timeData.days }}</span>
                            <span class="colon">:</span>
                            <span class="block">{{ timeData.hours }}</span>
                            <span class="colon">:</span>
                            <span class="block">{{ timeData.minutes }}</span>
                            <span class="colon">:</span>
                            <span class="block">{{ timeData.seconds }}</span>
                        </template>
                    </van-count-down>
                </div>
                <img :src="$pre + seckillData.img" mode="widthFix" class="seckill_img" />
            </div>
            <!-- 秒杀右侧区域 -->
            <div class="rightseckill">
                <div class="top">
                    <div>品牌上新</div>
                    <div>9点整，抢大牌</div>
                    <div>疯抢红包 > </div>
                </div>
                <div class="bottom">
                    <div>日用好物</div>
                    <div>愿君多采撷</div>
                    <div>塞满奖券 > </div>
                </div>
            </div>
        </div>

        <!-- 6.推荐商品区域 -->
        <div class="tuijian">
            <!-- 标题区域 -->
            <div class="tuijian_title">
                <span class="tuijian_active">双十一尖货预购</span>
                <span>畅购全球</span>
            </div>
            <!-- 滚动商品区域 -->
            <div scroll-x class="tuijian_scroll_x">
                <div class="tuijian_scroll_x_row" v-for="(item, index) in tuijianshop" :key="index">
                    <img :src="item.src" />
                </div>
            </div>
        </div>

        <!-- 7. 商品推荐区域-->
        <div class="hort">
            <van-tabs type="card" title-inactive-color="#FF6040" @click="changeTab">
                <!-- 推荐选项卡导航区域 -->
                <van-tab v-for="(item, index) in hortText" :key="index" :title="item.title">
                    <!-- 推荐商品列表数据区域 -->
                    <van-card v-for="m in hortData[hortIndex] ? hortData[hortIndex].content : []"
                        :tag="hortText[hortIndex].title" :price="m.price" :title="m.goodsname" :thumb="$pre + m.img"
                        :origin-price="m.market_price">
                        <template #num>
                            <van-button size="small" type="info" color="#FF6040">立即抢购</van-button>
                        </template>
                    </van-card>
                </van-tab>
            </van-tabs>
        </div>
        <!-- 8. 间隔槽-->
        <!-- <gap-comp :height="1"></gap-comp> -->
</div>
</template>

<script>
export default {
    data() {
        return {
            keywords: "",//搜索关键词
            cateData: [{
                "id": 1,
                "catename": "家用"
            },
            {
                "id": 2,
                "catename": "手机"
            }, {
                "id": 3,
                "catename": "厨房"
            }, {
                "id": 4,
                "catename": "母婴"
            }, {
                "id": 5,
                "catename": "户外"
            }],//分类导航数据
            bannerData: [],//商品轮播图数据
            quicknav: [
                { src: require('@/assets/img/icon/seckill.png'), text: '限时秒杀' },
                { src: require('@/assets/img/icon/top.png'), text: '畅销商品' },
                { src: require('@/assets/img/icon/brand.png'), text: '品质大牌' },
                { src: require('@/assets/img/icon/selfsupport.png'), text: '小U自营' },
                { src: require('@/assets/img/icon/integral.png'), text: '积分商城' }
            ],
            seckillData: {
                "id": 6,
                "title": "活动2",
                "begintime": "1599408000000",
                "endtime": "1678616385000",
                "img": "https://api.aslegou.top/uploads/banner/8f581960-7033-11ea-90dd-3b8abd26afb2.jpg",
            },//秒杀商品数据
            time: "1678616385000",//倒计时时间（毫秒）
            tuijianshop: [
                { src: require('@/assets/img/pic/commodity/01.png') },
                { src: require('@/assets/img/pic/commodity/02.png') },
                { src: require('@/assets/img/pic/commodity/03.png') },
                { src: require('@/assets/img/pic/commodity/04.png') },
                { src: require('@/assets/img/pic/commodity/05.png') }
            ],
            hortText: [//推荐商品选项卡文本
                { title: "热门推荐" },
                { title: "上新推荐" },
                { title: "所有商品" }
            ],
            hortIndex: 0,//默认推荐商品数据下标
            hortData: []//推荐商品数据（热门、上新、所有）
        };
    },
    mounted() {

        // 获取首页接口数据
        Promise.all([this.getCate(), this.getBanner(), this.getSeckill(), this.gethortgoods()])
            .then(res => {
                // 处理接口请求数据
                console.log(res)
                this.cateData = res[0]//赋值一级商品分类数据
                this.bannerData = res[1]//赋值一级商品分类数据
                this.seckillData = res[2][0]
                this.time = this.seckillData.endtime - new Date().getTime()
                this.hortData = res[3]
            })
            .catch(err => { console.log(err) })
    },
    methods: {
        // 切换推荐数据
        changeTab(index) {
            this.hortIndex = index
        },
        // 获取商品一级分类
        getCate() {
            return this.$api.reqGetCate()
        },
        // 获取商品活动数据
        getBanner() {
            return this.$api.reqGetBanner()
        },
        // 获取商品秒杀推荐数据
        getSeckill() {
            return this.$api.reqGetseckill()
        },
        // 获取商品推荐数据
        gethortgoods() {
            return this.$api.reqGethortgoods()
        }
    }
};
</script>

<style lang="less" scoped>@import "../../assets/less/home.less";</style>
